<template>
  <div>
    <el-form size="mini">
      <el-row :gutter="10">
        <el-col style="width: 300px;display: flex;">
          <div class="item_label">付款时间:</div>
          <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col style="width: 300px;display: flex;">
          <div class="item_label">渠道名称:</div>
           <el-select v-model="filterData.platform" style="width: 100%;" placeholder="订单渠道" clearable>
             <el-option v-for="(item,index) in platforms" :label="item.label" :key="item.index" :value="item.label">
             </el-option>
           </el-select>
        </el-col>
        <el-col style="width: 240px;display: flex;">
          <div class="item_label">外网单号:</div>
          <el-input placeholder="外网单号" v-model="filterData.ordercode" size="mini" clearable></el-input>
        </el-col>



        <el-col style="width: 240px;">
          <el-form-item label="付款金额:" label-width="80px">
            <el-input placeholder="付款金额" v-model="filterData.amount" size="mini" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 300px;display: flex;" v-if="false" >
          <div class="item_label">收款方:</div>
          <el-select v-model="filterData.supname" style="width: 100%;" placeholder="收款方"  size="mini" clearable>
            <el-option v-for="(item,index) in suppliers" :label="item.name" :key="item.index" :value="item.name">
            </el-option>
          </el-select>
        </el-col>

        <el-col style="width: 300px;display: flex;">
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查 询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 2px; border-bottom: 1px solid #E9E9E9; margin-bottom: 5px;"></div>

    <el-table :data="tableData" border style="padding:5px;height: calc(100vh - 220px); overflow-y: auto;"
      :header-cell-style="{background:'#f3f8ff'}">
      <el-table-column prop="id" label="id" v-if="false"></el-table-column>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column type="expand" label="详情">
        <template v-slot="scope">
          <div style="margin-right:400px;">
            <el-table :data="scope.row.goods" border style="margin-left: 110px;">
              <el-table-column prop="sn" label="货号" align="center" width="120px"></el-table-column>
              <el-table-column prop="title" label="商品名称" align="left"></el-table-column>
              <el-table-column prop="count" label="数量" align="center" width="80px"></el-table-column>
              <el-table-column prop="price" label="单价" align="center" width="120px"></el-table-column>
              <el-table-column prop="total" label="小计" align="center" width="120px"></el-table-column>
              <el-table-column prop="supprice" label="折后单价" align="center" width="120px">
              </el-table-column>
              <el-table-column prop="suptotal" label="折后小计" align="center" width="120px">
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="付款日期" align="left" width="150px"></el-table-column>
      <el-table-column prop="platform" label="订单渠道" align="center" width="120px"></el-table-column>
      <el-table-column prop="ordercode" label="外部单号" align="center" width="150px"></el-table-column>
      <el-table-column prop="amount" label="金额(元)" align="center" width="100px"></el-table-column>
      <el-table-column prop="supname" label="收款方" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cktitle" label="结算抬头" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bankname" label="开户行" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bankid" label="银行账号"></el-table-column>
      <el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>

    </el-table>
    <div style="margin-top: 10px;display: flex;">
      <div style="line-height: 30px; flex:1">付款总额:{{paysum.toFixed(3)}}</div>
      <div><el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
          layout=" prev, pager, next,sizes,total" :page-sizes="[20, 30, 60,150]" :total="numrows" :page-size="pagesize"
          :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        filterData: {
          mordercode: '',
          daterange: '',
          ordercode: '',
          amount: "",
          supname: ''
        },
        suppliers:[],
        platforms:[],
        tableData: [],
        paysum: 0,
        //分页相关
        curpage: 1,
        pagesize: 20,
        numrows: 1,
      }
    },
    mounted() {
      this.loadDataList();
      this.loadPlatforms();
      this.loadSuppliers();
    },
    methods: {
      loadSuppliers(){
           this.axios.post("api/admin/supplier/list").then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                      this.suppliers = res.data.list;
                      //选中默认sup
                      /*var userinfo=JSON.parse(localStorage.getItem("userinfo"))
                      this.formData.supid=userinfo.supid+"";*/
                    }
            });
      },
      loadPlatforms(){
        this.axios.post("/api/admin/platform/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.platforms = res.data.platforms;
          }
        })
      },
      handleSearch() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = val;
        this.loadDataList();
      },
      loadDataList: function() {
        let params = {
          daterange: this.filterData.daterange,
          ordercode: this.filterData.ordercode,
          platform: this.filterData.platform,
          amount: this.filterData.amount,
          supname: this.filterData.supname,
          curpage: this.curpage,
          pagesize: this.pagesize
        }
        this.axios.post("api/admin/payment/list", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.curpage = res.data.curpage;
            this.numrows = parseInt(res.data.numrows);
            this.paysum = parseFloat(res.data.sum);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .item_label {
    text-align: center;
    line-height: 30px;
    margin:0px 2px;
    width: 95px;
  }
</style>
